<template>
  <view class="index">
    <nut-input v-model="searchMac" clearable center placeholder="请输入MAC">
      <template #button>
        <nut-button plain size="small" type="primary" icon="search"></nut-button>
        &nbsp;或<nut-button plain size="small" type="primary" icon="scan" @click="scanMac">扫码</nut-button>
      </template>
    </nut-input>

    <nut-grid :border="false">
      <nut-grid-item v-for="d in devices" :key="d.id">
        <div :class="'state ' + d.state">
          {{ d.state == "online" ? "ONLINE" : "OFFLINE" }}
        </div>
        <div class="device">
          <img :src="d.img" />
          <div class="name">{{ d.name }}</div>
          <div class="operation"><nut-switch v-model="d.switch" /></div>
        </div>
      </nut-grid-item>
    </nut-grid>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import { reactive, toRefs,ref } from "vue";
export default {
  name: "Index",
  components: {},
  setup() {
    const state = reactive({
    });
    const searchMac=ref("");

    const devices = [
      {
        id: "1",
        name: "客厅开关",
        img: "cloud://dev-304ml.6465-dev-304ml-1300481250/device/switch_1.jpeg",
        switch: true,
        state: "offline",
      },
      {
        id: "2",
        name: "客厅插座",
        img: "cloud://dev-304ml.6465-dev-304ml-1300481250/device/socket.jpeg",
        switch: false,
        state: "online",
      },
      {
        id: "3",
        name: "客厅开关",
        img: "cloud://dev-304ml.6465-dev-304ml-1300481250/device/socket.jpeg",
        switch: false,
        state: "online",
      },
      {
        id: "4",
        name: "客厅开关",
        img: "cloud://dev-304ml.6465-dev-304ml-1300481250/device/switch_1.jpeg",
        switch: true,
        state: "offline",
      },
    ];

    function scanMac(){
      Taro.scanCode();
    }


    return {
      state,
      devices,
      searchMac
    };
  },
};
</script>

<style lang="scss">
</style>
